<template>
  <el-card>
    <el-row class="f-row ai-c">
      <span class="mr-1 left">头像</span>
      <!--  <el-avatar :src="face"></el-avatar> -->
      <el-upload
        class="avatar-uploader"
        :action="actionUrl"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="face" :src="face" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-row>
    <el-row class="f-row mt-2">
      <span class="mr-1 left ws-n">擅长领域:</span>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入擅长领域"
        v-model="domain"
        maxlength="300"
        show-word-limit
      >
      </el-input>
    </el-row>
    <el-row class="f-row mt-2">
      <span class="mr-1 left ws-n">个人简介：</span>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入资质信息、履历信息等"
        v-model="introduction"
        maxlength="300"
        show-word-limit
      >
      </el-input>
    </el-row>
    <div class="btn-deep ml-10" @click="save">{{ save_txt }}</div>
    <div class="btn-light mt-2" @click="$router.go(-1)">取消</div>
  </el-card>
</template>
<script>
import { upfiles, set_expert_centerinfo ,login_infofn} from "@/request/api";
export default {
  data() {
    return {
      introduction: "",
      domain: "",
      face: "",
      actionUrl: "#",
      save_txt: "保存",
    };
  },
  created() {
    this.introduction = this.$route.query.introduction;
    this.domain = this.$route.query.domain;
    this.face = this.$route.query.face;
  },
  methods: {
    save() {
      this.save_txt = "保存中";

      set_expert_centerinfo({
        domain: this.domain,
        introduction: this.introduction,
        face: this.face,
      }).then((res) => {
        this.save_txt = "保存成功";
        //登录信息
        login_infofn()
          .then((res) => {
            if(res.code==200){
              this.$store.commit("SETLOGININFO", res.result);
            }else{
              this.$message.error('更新信息失败，请刷新页面！')
            }
          })
          .catch((err) => {
            console.log(err, "获取登录信息失败");
          });
        this.$router.push("/personalCenter");
      });
    },
    beforeAvatarUpload(file) {
      upfiles(file).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "上传成功！",
            type: "success",
          });
          this.face = res.result;
        } else {
          this.$message.error("上传失败");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-upload {
  img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
  }
}
.el-card {
  width: 100%;
  height: 100%;
  padding-left: 3rem !important;
  box-sizing: border-box;
}
.left {
  color: #1f1f1f;
  line-height: 3rem;
  width: 6.25rem;
  line-height: 3rem;
}
.right {
  color: #676767;
  width: 25rem;
  line-height: 3rem;
}
.el-textarea {
  width: 50rem;
  textarea {
    height: 10rem;
  }
}
</style>